<template>
    <view class="content">
        <view class="title">{{ info.title }}</view>
        <view class="video-box" v-if="info.videos">
            <view class="play-btn" @tap.stop="playVideo()" v-if="!play">
                <view class="triangle"></view>
            </view>
            <image mode="widthFix" class="cover" :src="info.cover" v-if="!play"/>
            <video class="video" v-else :src="info.videos" autoplay controls></video>
        </view>
        <image class="image" mode="widthFix" :src="item" v-for="(item, index) in info.images" :key="index"/>

        <!--智能搜索-->
        <ai-search ref="aiSearch"></ai-search>
    </view>
</template>

<script>
	export default {
		name: 'course-detail',
        data() {
			return {
				info: {},
                play: false,
            }
        },
        onLoad(options) {
			this.getInfo(options);
        },
        onShow() {
			this.$nextTick(() => {
			uni.getClipboardData({
				success: res => {
					if (res.data && this.$store.state.common.aiSearch) {
						this.$refs.aiSearch.open(res.data);
						this.$store.commit({
							type: 'setAiSearch',
							aiSearch: false
						});
					}
				}
			});
		});
        },
		onHide() {
			this.$refs.aiSearch.close();
		},
        methods: {
			playVideo() {
				this.play = true;
            },
			getInfo(options) {
				this.$service.common.introduction.info({
                    id: options.id
                }).then(res => {
					this.info = res;
					this.info.images = this.info.images.split(',');
                })
            }
        }
	};
</script>

<style lang="scss" scoped>
.content {
    padding: 20rpx;
	background: #fff;
    .image {
        display: block;
        width: 100%;
    }
    .title {
        width: 100%;
        text-align: center;
        color: #221D2C;
        font-size: 36rpx;
        margin: 20rpx 0;
        font-weight: 600;
    }
    .video-box {
        width: 100%;
        height: 280rpx;
        margin-bottom: 20rpx;
        border-radius: 16rpx;
        overflow: hidden;
        position: relative;
        @include flexBox(center, center);
        .play-btn {
            width: 68rpx;
            height: 68rpx;
            background: rgba(0,0,0,0.5);
            border-radius: 20rpx;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -34rpx;
            margin-top: -34rpx;
            z-index: 100;
            .triangle {
                transform: rotateZ(45deg);
                border: 14rpx solid #fff;
                border-left: 14rpx solid transparent;
                border-bottom: 14rpx solid transparent;
                content: "";
                position: relative;
                width: 0;
                margin-left: 16rpx;
                margin-top: 20rpx;
                opacity: 0.8;
            }
        }
        .cover {
            width: 100%;
            height: 100%;
        }
        .video {
            width: 100%;
            height: 100%;
        }
    }
}
</style>